<template>
  <div class="container">
    <div class="header">
      <van-nav-bar title="旅游景点" left-text="返回" right-text left-arrow @click-left="onContainer"/>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="serach_box">
        <div class="left">
          <img src="../../assets/images/adress.png" alt>
          <span>{{positionText}}</span>
        </div>
        <div class="center">
          <van-search
            placeholder="搜索"
            v-model="searchValue"
            @search="searchMethod"
            @clear="clearSearch"
          />
        </div>
        <div class="right">
          <div class="shoppingCarBtn" @click="toShoppingCar">
            <img src="../../assets/images/zky_icon33.png" alt>
            <span>我的记录</span>
          </div>
        </div>
      </div>
      <div class="nav">
        <div class="item" @click="allSelect" :class="isShowAllMark?'mark':''">全部</div>
        <div class="item" @click="projectToggle" :class="isShowFilterMark?'mark':''">
          <span>筛选条件</span>
          <img :src="filterIcon" alt>
        </div>
        <div class="item" @click="locationSearchToggle" :class="isShowLocationMark?'mark':''">
          <span>位置搜索</span>
          <img :src="locationIcon" alt>
        </div>
        <div class="item" @click="sortingToggle" :class="isShowSortMark?'mark':''">
          <span>智能排序</span>
          <img :src="sortIcon" alt>
        </div>
      </div>
      <div class="filterPop" v-if="isShowFilterPop">
        <div class="content">
          <div class="popList">
            <div class="project" v-show="isShowProject">
              <ul>
                <li v-for="(item,index) in projectList" :key="index">
                  <span
                    :class="{selectProject:item.isSelect}"
                    @click="selectProjectMethod(item)"
                  >{{item.name}}</span>
                </li>
              </ul>
            </div>
            <div class="locationSearch" v-show="isShowLocationSearch">
              <div class="province">
                <div
                  v-for="(item,index) in provinceList"
                  :key="index"
                  @click="provinceMethod(item)"
                  :class="item.select?'mark':''"
                >{{item.name}}</div>
              </div>
              <!--<div class="city">-->
                <!--<div-->
                  <!--v-for="(item,index) in cityList"-->
                  <!--:key="index"-->
                  <!--@click="cityMethod(item)"-->
                  <!--:class="item.select?'mark':''"-->
                <!--&gt;{{item.name}}</div>-->
              <!--</div>-->
              <!--<div class="district">-->
                <!--<div-->
                  <!--v-for="(item,index) in districtList"-->
                  <!--:key="index"-->
                  <!--@click="districtMethod(item)"-->
                  <!--:class="item.select?'mark':''"-->
                <!--&gt;{{item.name}}</div>-->
              <!--</div>-->
            </div>
            <div class="sorting" v-show="isShowSorting">
              <div
                v-for="(item,index) in sortList"
                :key="index"
                :class="{selectColor:item.selectColor}"
                @click="selectItem(item)"
              >{{item.name}}</div>
            </div>
          </div>
          <div class="sure" @click="sureFilter">确定</div>
        </div>
      </div>

      <div class="tab">
        <div class="list">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
              <li
                v-for="(item,index) in initData.list"
                :key="index"
                @click="toFarmIndex(item)"
              >
                <div class="box_content">
                  <div class="left">
                    <img :src="item.image_url" alt>
                  </div>
                  <div class="right">
                    <div class="title">{{item.name}}</div>
                    <div class="rate">
                      <van-rate v-model="item.rating/2" color="#01bf47" :size="22" readonly void-color="#cccccc"/>
                    </div>
                    <!-- <div class="subtitle">{{item.description}}</div> -->
                    <div class="classification">
                      <div v-for="(at,eq) in item.keyvalueList" :key="eq" v-if="eq<2">{{at}}</div>
                    </div>
                     <div class="price"><span>￥ {{item.price}} 起</span></div>
                    <div class="adress">
                      <img src="../../assets/images/adress3.png" alt>
                      <span>{{item.address}}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
      </div>
    </van-pull-refresh>
    <positionMap ref="pMap"></positionMap>
  </div>
</template>

<script>
  import $province from "../../common/province";
  import positionMap from "../../components/positionMap";
  import district from "../../common/district";
  export default {
    name: "ScenicSpotIndex",
    components: {
      positionMap
    },
    data() {
      return {
        tabIcon: {
          normal: require("../../assets/images/arrow.png"),
          active: require("../../assets/images/arrow2.png")
        },
        filterIcon: require("../../assets/images/arrow.png"),
        locationIcon: require("../../assets/images/arrow.png"),
        sortIcon: require("../../assets/images/arrow.png"),
        //定位省市区
        positionText: "",
        swipeNum: 6,
        lineHeight: 0,
        active: 0,
        tabList: [],
        //搜索关键字
        searchValue: "",
        value: 4,
        initData: {},
        initDataList: [],
        typeId: "",
        //下拉刷新
        isLoading: false,
        //上拉加载
        loading: false,
        finished: false,
        pageNum: 1,
        //是否显示过滤弹窗
        isShowFilterPop: false,
        //是否显示娱乐项目弹窗内容
        isShowProject: false,
        //是否显示位置搜索弹窗内容
        isShowLocationSearch: false,
        //是否显示智能排序弹窗内容
        isShowSorting: true,
        //智能排序列表
        sortList: [
          {
            name: "离我最近",
            selectColor: false
          },
          {
            name: "好评优先",
            selectColor: false
          },
          {
            name: "最近发布",
            selectColor: false
          }
        ],
        //娱乐项目列表
        projectList: [],
        //位置搜索列表
        provinceList: district,
        // cityList: [],
        // districtList: [],
        //选中的娱乐项目
        types:'',
        //选中的位置
        selectPrivince: "",
        //选中的智能排序类型
        sortType: "",
        //定位省份名字
        locationProvince: "",
        //定位城市名字
        locationCity: "",
        //定位区县名字
        locationDistrict: "",
        //定位省份编码
        locationProvince_code: "",
        //定位城市编码
        locationCity_code: "",
        //定位区县编码
        locationDistrict_code: "",
        positionAddress: {},
        province_name: "",
        //位置搜索选取省份编码
        province_name_code: "",
        city_name: "",
        district_name: "",
        isShowAllMark: true,
        isShowFilterMark: false,
        isShowLocationMark: false,
        isShowSortMark: false,
        // titleName: ""
        ratingNum:0,
      };
    },
    watch: {
      isShowFilterPop() {
        if (!this.isShowFilterPop) {
          this.projectList.forEach((item, index) => {
            item.isSelect = false;
          });
          // this.provinceList.forEach((item, index) => {
          //   item.selectColor = false;
          // });
          this.provinceList.forEach((item, index) => {
            item.select = false;
          });
          // this.cityList.forEach((item, index) => {
          //   item.select = false;
          // });
          // this.districtList.forEach((item, index) => {
          //   item.select = false;
          // });
          // this.cityList = [];
          // this.districtList = [];
          this.sortList.forEach((item, index) => {
            item.selectColor = false;
          });
        }
      },
      //获取定位地址
      positionAddress() {
        if (this.positionAddress && this.positionAddress.addressComponent) {
          this.positionText = this.positionAddress.addressComponent.province;
          this.locationProvince = this.positionAddress.addressComponent.province;
          this.locationCity = this.positionAddress.addressComponent.city;
          this.locationDistrict = this.positionAddress.addressComponent.district;
          this.provinceList.forEach((item, index) => {
            if (this.locationProvince == item.name) {
              this.locationProvince_code = item.code;
              item.child.forEach((at, eq) => {
                if (this.locationCity == at.name) {
                  this.locationCity_code = at.code;
                  at.child.forEach((el, num) => {
                    if (this.locationDistrict == el.name) {
                      this.locationDistrict_code = el.code;
                    }
                  });
                }
              });
            }
          });
        }
      }
    },
    mounted() {
      console.warn("title:旅游景点"); //andriod监听方法，勿删除
      // if (this.$route.query.titleName) {
      //   this.titleName = decodeURIComponent(this.$route.query.titleName);
      // }
      this.getTabList();
      this.getInitData();
    },
    methods: {
      //返回
      onContainer() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
          console.warn("finish");
        } else if (isiOS) {
          window.webkit.messageHandlers.tourismBackToApp.postMessage(null);
        }
      },
      //搜索
      searchMethod() {
        this.getInitData();
      },
      //清除搜索
      clearSearch() {
        this.getInitData();
      },
      //跳转景点详情
      toFarmIndex(item) {
        this.$router.push({path: "./travelDetails", query: {shopId: item.id}});
      },
      //tab切换
      tabChange(index, title) {
        if (this.tabList[index].id) {
          this.typeId = this.tabList[index].id;
        } else {
          this.typeId = "";
        }
        this.initDataList = [];
        this.pageNum = 1;
        this.finished = false;
        this.getInitData();
      },
      //下拉刷新
      onRefresh() {
         this.initDataList = [];
        this.pageNum = 1;
        this.finished = false;
        this.getTabList();
        this.getInitData();
      },
      //上拉加载
      onLoad() {
        if (this.initData.list && this.initData.list.length > 0) {
          this.getInitData();
        }
      },
      //获取tab列表
      async getTabList() {
        let params = {

        };
        const res = await this.$axios.post(this.$api.tourismList, params);
        if (res.success) {
          this.projectList = res.data;
          this.projectList.forEach((item, index) => {
            item.isSelect = false;
          });
          this.isLoading = false;
          this.loading = false;
        } else {
          this.tabList = [];
          this.$toast(res.msg);
        }
      },
      //获取列表数据
      async getInitData() {

        let params = {
          pageNum: this.pageNum,
          pageSize: 10,
          keyWord: this.searchValue || "",//关键字
          province_code: this.province_name_code,//位置，省的编码
          myNearby:this.province_code, //智能排序类型，离我最近
          sortType: this.sortType,//智能排序类型
          scenicSpotTypeId: this.types, //景点类型ID
        };
        const res = await this.$axios.post(this.$api.scenicSpotList, params);
        if (res.success && res.data) {
          if (this.loading) {
            this.initDataList = this.initDataList.concat(res.data.list);
            this.initData = res.data;
            this.initData.list = this.initDataList;
            if (this.initData.list.length >= this.initData.total) {
              this.finished = true;
            } else {
              this.pageNum++;
            }
          } else {
            this.initData = res.data;
            if (this.initData.list.length >= this.initData.total) {
              this.finished = true;
            }
          }
          this.initData.list.forEach((item, index) => {
            item.keyvalueList = item.key_value.split(",");
          });
          this.isLoading = false;
          this.loading = false;
        } else {
          this.initData = {};
          this.$toast(res.msg);
        }
      },
      //获取位置搜索信息
      getLocationList() {
        this.provinceList.forEach((item, index) => {
          item.select = false;
        });
      },
      //三级联动选省
      provinceMethod(item) {
        this.provinceList.forEach((item, index) => {
          item.select = false;
        });
        // this.cityList.forEach((item, index) => {
        //   item.select = false;
        // });
        // this.districtList.forEach((item, index) => {
        //   item.select = false;
        // });
        // this.cityList = [];
        // this.districtList = [];
        item.select = true;
        this.province_name = item.name;
        this.provinceList.forEach((i, index) => {
          if(i.name==item.name){
            this.province_name_code=i.code;
          };
        });
        // this.cityList = item.child;
        this.$forceUpdate();
      },
      // cityMethod(item) {
      //   this.cityList.forEach((item, index) => {
      //     item.select = false;
      //   });
      //   this.districtList.forEach((item, index) => {
      //     item.select = false;
      //   });
      //   item.select = true;
      //   this.city_name = item.name;
      //   this.districtList = item.child;
      //   this.$forceUpdate();
      // },
      // districtMethod(item) {
      //   this.districtList.forEach((item, index) => {
      //     item.select = false;
      //   });
      //   item.select = true;
      //   this.district_name = item.name;
      //   //  this.cityList=item.child;
      //   this.$forceUpdate();
      // },
      //筛选切换
      allSelect() {
        this.isShowAllMark = true;
        this.isShowFilterMark = false;
        this.isShowLocationMark = false;
        this.isShowSortMark = false;
        this.filterIcon = this.tabIcon.normal;
        this.locationIcon = this.tabIcon.normal;
        this.sortIcon = this.tabIcon.normal;
        this.locationProvince_code = "";
        this.locationCity_code = "";
        this.locationDistrict_code = "";
        this.selectPrivince = "";
        this.sortType = "";
        this.types = '';
        this.province_name_code='';
        this.isShowFilterPop = false;
        this.getInitData();
      },
      projectToggle() {
        if (this.isShowFilterPop && this.isShowProject) {
          this.isShowFilterPop = false;
          if (!this.selectPrivince && !this.sortType && this.types) {
            this.isShowAllMark = true;
            this.isShowFilterMark = false;
            this.isShowLocationMark = false;
            this.isShowSortMark = false;
            this.filterIcon = this.tabIcon.normal;
            this.locationIcon = this.tabIcon.normal;
            this.sortIcon = this.tabIcon.normal;
          } else {
            this.isShowAllMark = false;
          }
        } else {
          this.isShowFilterPop = true;
          this.isShowProject = true;
          this.isShowLocationSearch = false;
          this.isShowSorting = false;

          this.isShowFilterMark = true;
          this.isShowAllMark = false;
          this.isShowLocationMark = false;
          this.isShowSortMark = false;
          this.filterIcon = this.tabIcon.active;
          this.locationIcon = this.tabIcon.normal;
          this.sortIcon = this.tabIcon.normal;
        }
      },
      locationSearchToggle() {
        if (this.isShowFilterPop && this.isShowLocationSearch) {
          this.provinceList.forEach((item, index) => {
            item.select = false;
          });
          this.cityList.forEach((item, index) => {
            item.select = false;
          });
          this.districtList.forEach((item, index) => {
            item.select = false;
          });
          this.cityList = [];
          this.districtList = [];
          this.isShowFilterPop = false;
          if (!this.selectPrivince && !this.sortType && this.types) {
            this.isShowAllMark = true;
            this.isShowFilterMark = false;
            this.isShowLocationMark = false;
            this.isShowSortMark = false;
            this.filterIcon = this.tabIcon.normal;
            this.locationIcon = this.tabIcon.normal;
            this.sortIcon = this.tabIcon.normal;
          } else {
            this.isShowAllMark = false;
          }
        } else {
          this.isShowFilterPop = true;
          this.isShowLocationSearch = true;
          this.isShowProject = false;
          this.isShowSorting = false;

          this.isShowFilterMark = false;
          this.isShowAllMark = false;
          this.isShowLocationMark = true;
          this.isShowSortMark = false;
          this.filterIcon = this.tabIcon.normal;
          this.locationIcon = this.tabIcon.active;
          this.sortIcon = this.tabIcon.normal;
        }
      },
      sortingToggle() {
        if (this.isShowFilterPop && this.isShowSorting) {
          this.isShowFilterPop = false;
          if (!this.selectPrivince && !this.sortType && this.types) {
            this.isShowAllMark = true;
            this.isShowFilterMark = false;
            this.isShowLocationMark = false;
            this.isShowSortMark = false;
            this.filterIcon = this.tabIcon.normal;
            this.locationIcon = this.tabIcon.normal;
            this.sortIcon = this.tabIcon.normal;
          } else {
            this.isShowAllMark = false;
          }
        } else {
          this.isShowFilterPop = true;
          this.isShowSorting = true;
          this.isShowProject = false;
          this.isShowLocationSearch = false;

          this.isShowFilterMark = false;
          this.isShowAllMark = false;
          this.isShowLocationMark = false;
          this.isShowSortMark = true;

          this.filterIcon = this.tabIcon.normal;
          this.locationIcon = this.tabIcon.normal;
          this.sortIcon = this.tabIcon.active;
        }
      },
      //智能排序选择
      selectItem(item) {
        this.sortList.forEach((item, index) => {
          item.selectColor = false;
        });
        item.selectColor = true;
      },
      //娱乐项目选择
      selectProjectMethod(item) {
        item.isSelect = !item.isSelect;
        this.$forceUpdate();
      },
      //省份选择
      selectPrivinceMethod(item) {
        this.locationList.forEach((item, index) => {
          item.selectColor = false;
        });
        item.selectColor = true;

        this.$forceUpdate();
      },
      //确定筛选
      sureFilter() {
        this.projectList.forEach((item, index) => {
          if (item.isSelect) {
            this.types=item.id;
          }
        });
        // this.locationList.forEach((item, index) => {
        //   if (item.selectColor) {
        //     this.selectPrivince = item.name;
        //   }
        // });
        this.provinceList.forEach((item, index) => {
          item.select = false;
        });

        // this.cityList.forEach((item,index)=>{
        //   item.select=false;
        // });
        //
        // this.districtList.forEach((item,index)=>{
        //   item.select=false;
        // });
        // this.cityList = [];
        // this.districtList = [];
        this.sortList.forEach((item, index) => {
          if (item.selectColor && item.name == "好评优先") {
            this.sortType = "rating";
          } else if (item.selectColor && item.name == "最近发布") {
            this.sortType = "created_at";
          } else if (item.selectColor && item.name == "离我最近") {
            this.province_code = this.locationProvince_code;
          }
        });
        this.getInitData();
        this.isShowFilterPop = false;
      },
      // toMyAdopt() {
      //   this.$router.push({
      //     path: "/myAdopt",
      //     query: {}
      //   });
      // },
      toShoppingCar() {
        this.$router.push({
          path: "/travelRecord",
          query: {}
        });
      },

      // async getAddressCode(addressName, type) {
      //   let params = {
      //     addressName: addressName
      //   };
      //   const res = await this.$axios.post(this.$api.getAddressCode, params);
      //   if (res.success) {
      //     if (type == "province") {
      //       this.locationProvince_code = res.data;
      //     } else if (type == "city") {
      //       this.locationCity_code = res.data;
      //     } else if (type == "district") {
      //       this.locationDistrict_code = res.data;
      //     }
      //   } else {
      //   }
      // }
    }
  };
</script>

<style scoped>
  .locationSearch {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #404040;
    font-size: 0.15rem;
  }
  .locationSearch > div {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    width: 33.33% !important;
    height: 1.42rem !important;
    overflow-y: auto;
    flex-direction: column;
  }
  .locationSearch > div > div {
    height: 50px;
    /* width:100%; */
    padding: 10px;
  }
  .locationSearch .province {
    background: #fff;
    height: 100% !important;
  }
  .locationSearch .city {
    background: #f5f5f5;
    height: 100% !important;
  }
  .locationSearch .district {
    background: #ebebeb;
    height: 100% !important;
  }
  .price {
    font-size: 0.12rem;
    color: #f44736;
    padding-top: 0.06rem;
  }
  .price span {
    font-size: 0.15rem;
    color: #f44736;
  }
  .mark {
    color: #01bf47;
  }
  .selectColor {
    color: #00be46 !important;
  }
  .selectProject {
    color: #fff !important;
    background: #00be46 !important;
  }
  .nav {
    width: 100%;
    height: 0.4rem;
    background: #fff;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
  }
  .filterPop {
    position: fixed;
    top: 0.88rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 1.38rem);
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid #eeeeee;
    z-index: 100;
  }
  .filterPop .content {
    background: #fff;
    height: 1.87rem;
    padding-bottom: 0.45rem;
    position: relative;
  }
  .filterPop .content .popList {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  .filterPop .content .sure {
    position: absolute;
    background: #00be46;
    color: #fff;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.45rem;
    display: flex;
    display: -webkit-flex;
    font-size: 0.16rem;
  }
  .filterPop .project ul {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    padding-top: 0.08rem;
  }
  .filterPop .project ul li {
    width: 33.33%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    padding: 0.08rem 0;
  }
  .filterPop .project ul li span {
    display: flex;
    display: -webkit-flex;
    background: #f5f5f5;
    width: 0.8rem;
    height: 0.3rem;
    justify-content: center;
    align-items: center;
    color: #808080;
    font-size: 0.14rem;
    border-radius: 0.03rem;
    -webkit-border-radius: 0.03rem;
  }
  .filterPop .sorting,
  .filterPop .locationSearch {
    width: 100%;
  }
  .filterPop .sorting > div {
    width: 100%;
    height: 0.4rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    color: #404040;
    font-size: 0.15rem;
  }
  .nav .item {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    font-size: 0.15rem;
    color: #333333;
  }
  .nav .mark {
    color: #01bf47;
  }
  .nav .item img {
    width: 0.1rem;
  }
  .nav .item span {
    padding-right: 0.06rem;
  }
  .container {
    padding-top: 0.46rem;
    width: 100%;
  }
  .header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .serach_box {
    width: 100%;
    height: 0.55rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0.16rem;
    background: #f7f7f7;
  }
  .serach_box .left {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    width: 20%;
  }
  .serach_box .left img {
    width: 0.13rem;
  }
  .serach_box .left span {
    font-size: 0.14rem;
    color: #000000;
    padding-left: 0.06rem;
  }
  .serach_box .right {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    width: 20%;
    height: 100%;
    background: #f7f7f7;
    /* box-shadow: 0px 3px 8px 0px rgba(107, 107, 107, 0.19); */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    position: relative;
    font-size: 0.12rem;
  }
  .serach_box .right .shoppingCarBtn {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .serach_box .right .myRecordBtn {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .serach_box .right img {
    width: 0.25rem;
    /*margin-bottom: 0.05rem;*/
  }
  .serach_box .right span {
    font-size: 0.12rem;
    color: #00bf46;
    padding-left: 0.04rem;
  }
  .serach_box .right .mark {
    width: 0.05rem;
    height: 0.05rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #f44736;
    position: absolute;
    top: -0.06rem;
    right: 0.16rem;
  }
  .serach_box .center {
    width: 60%;
    height: 100%;
  }
  .van-search {
    padding: 0 0.14rem;
  }
  .banner {
    width: 100%;
    margin-top: 0.15rem;
    padding: 0 0.08rem;
  }
  .banner img {
    width: 100%;
  }
  .list {
    width: 100%;
    height: 100%;
    padding: 0 0.16rem;
    min-height: calc(100vh - 2.55rem);
  }
  .list li {
    width: 100%;
    background: #fff;
    border-radius: 0.1rem;
    -webkit-border-radius: 0.1rem;
    margin-top: 0.08rem;
    padding: 0 0.15rem;
  }
  .list .box_content {
    width: 100%;
    /* height: 1.56rem; */
    padding: 0.15rem 0;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;
  }
  .list .box_content .left {
    min-height: 1.05rem;
    display: flex;
    -webkit-display: flex;
    justify-content: center;
    align-items: center;
  }
  .list .box_content .left img {
    width: 1.05rem;
    border-radius: 0.05rem;
    -webkit-border-radius: 0.05rem;
    height: 100%;
  }
  .list .box_content .right {
    padding-left: 0.15rem;
  }
  .list .box_content .right .title {
    font-size: 0.15rem;
    color: #333333;
    margin-bottom: 0.06rem;
  }
  .list .box_content .right .subtitle {
    font-size: 0.12rem;
    color: #8c8c8c;
    margin-bottom: 0.06rem;
  }
  .list .box_content .right .classification {
    display: flex;
    -webkit-display: flex;
    flex-wrap: wrap;
  }
  .list .box_content .right .classification > div {
    /* width: 0.45rem; */
    height: 0.2rem;
    background: #e4ffeb;
    color: #04b746;
    border-radius: 3px;
    display: flex;
    -webkit-display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.1rem;
    line-height: 0;
    padding: 0 0.06rem;
  }
  .list .box_content .right .classification > div:last-of-type {
    margin-right: 0;
  }
  .list .box_content .right .adress {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.06rem;
  }
  .list .box_content .right .adress img {
    width: 0.13rem;
  }
  .list .box_content .right .adress span {
    font-size: 0.14rem;
    color: #808080;
    padding-left: 0.06rem;
  }
  .box_footer {
    width: 100%;
    height: 0.42rem;
    display: flex;
    -webkit-display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.12rem;
    color: #333333;
  }
  .box_footer span {
    color: #f44736;
    font-size: 0.16rem;
  }
</style>


<style>
  .van-tab--active {
    color: #01bf47;
  }
  .van-search {
    background: none !important;
  }
  .van-search .van-cell {
    border-radius: 50px !important;
    background: #e8e8e8;
  }
</style>
